<template>
	<div class="right listP" id="tab_data">
        <div class="list_tit">
            <span>编辑/添加产品</span>
            <router-link to="/list"><button class="btn btn-primary btn-sm pull-right">产品列表</button></router-link>
        </div>
        <div class="table_wrap">
            <table class="table">
                <tbody>
                	<tr>
                		<td>产品名称：</td>
                		<td><input type="text" style="width: 315px;" v-model="name" class="form-control"/></td>
                	</tr>
                	<tr>
                		<td>产品分类：</td>
                		<td>
                			<select name="" v-model="sel">
                				<option value="面包">面包</option>
                				<option value="馒头">馒头</option>
                			</select>
                		</td>
                	</tr>
                	<tr>
                		<td>市场价：</td>
                		<td><input type="text" style="width: 75px;" v-model="market" class="form-control"/><span>元</span></td>
                	</tr>
                	<tr>
                		<td>会员价：</td>
                		<td><input type="text" style="width: 75px;" v-model="vip" class="form-control"/><span>元</span></td>
                	</tr>
                	<tr>
                		<td>库存：</td>
                		<td><input type="text" style="width: 75px;" v-model="reset" class="form-control"/><span>盘</span></td>
                	</tr>
                	<tr>
                		<td>推荐至：</td>
                		<td>
                			<label for="deserve"><input type="checkbox" id="deserve" v-model="deserve"/>精品</label>
                			<label for="newPro"><input type="checkbox" id="new" v-model="newPro"/>新品</label>
                			<label for="hot"><input type="checkbox" id="hot" v-model="hot"/>热销</label>
                		</td>
                	</tr>
                	<tr>
                		<td></td>
                		<td><button class="btn btn-default btn-sms" v-on:click="publish">发布新商品</button></td>
                	</tr>
                </tbody>
            </table>
        </div>
	</div>
</template>

<script>
	import storage from '../js/common'
	export default {
		data(){
			return{
				name:"",
				sel:"",
				market:"",
				vip:"",
				reset:"",
				type:"",
				newPro:"",
				deserve:"",
				hot:""
			}
		},
		methods:{
			publish(){
				if(this.name!=""&&this.sel!=""&&this.market!=""&&this.vip!=""&&this.reset!=""){
					let obj = {
						name:this.name,
						sel:this.sel,
						market:this.market,
						vip:this.vip,
						reset:this.reset,
						newPro:this.newPro,
						deserve:this.deserve,
						hot:this.hot,
						id:100,
						flag:false
					}
					storage("product",obj);
					location.hash = "/list";
				}
			}
		}
	}
</script>
	
<style scoped>
	td{
		text-align: left;
	}
	select{
		float: left;
		width: 60px;
		height: 30px;
	}
	input{
		display: inline;
		float: left;
	}
	td span{
		float: left;
		position: relative;
		top: 10px;
		left: 5px;
	}
	input[type="checkbox"]{
		margin-left: 15px;
		margin-right: 10px;
		position: relative;
		top: -2px;
	}
</style>